import React, { useState, useEffect } from 'react';
import {
    View,
    Text,
    TextInput,
    Switch,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';
import { Picker } from '@react-native-picker/picker';
import AsyncStorage from '@react-native-async-storage/async-storage'; // 引入AsyncStorage

const SystemScreen = () => {

    const [systemSettings, setSystemSettings] = useState({
        alarmEnabled: false,
        alarmTime: { hours: 0, minutes: 0 },
    });

    const toggleAlarmSwitch = () => {
        setSystemSettings((prevSettings) => ({
            ...prevSettings,
            alarmEnabled: !prevSettings.alarmEnabled,
        }));
    };

    const handlePickerChange = (field, value) => {
        setSystemSettings((prevSettings) => ({
            ...prevSettings,
            alarmTime: {
                ...prevSettings.alarmTime,
                [field]: value,
            },
        }));
    };

    const handleSaveSystemSettings = async (systemSettings) => {
        try {
            // 将设置保存到本地
            await AsyncStorage.setItem('systemSettings', JSON.stringify(systemSettings));
            console.log('System settings saved successfully!');
        } catch (error) {
            console.error('Error saving system settings:', error);
        }
    };

    return (
        <View style={styles.container}>

            {/*系统设置*/}
            <Text style={styles.title}>System Settings</Text>
            <View style={[styles.profileOutlet]}>
                {/* 闹铃是否开启 */}
                <View style={styles.switchContainer}>
                    <Text style={[styles.text]}>Enable Alarm</Text>
                    <Switch value={systemSettings.alarmEnabled} onValueChange={toggleAlarmSwitch} />
                </View>

                {/* 闹铃开启时间 */}
                {systemSettings.alarmEnabled && (
                    <View style={styles.timePickerContainer}>
                        <Text style={[styles.text]}>Alarm Time</Text>
                        <View style={styles.pickerContainer}>
                            <Picker
                                selectedValue={systemSettings.alarmTime.hours}
                                onValueChange={(itemValue) => handlePickerChange('hours', itemValue)}
                            >
                                {Array.from({ length: 24 }, (_, i) => i).map((hour) => (
                                    <Picker.Item key={hour} label={hour.toString()} value={hour} />
                                ))}
                            </Picker>
                            <Text style={styles.colon}>:</Text>
                            <Picker
                                selectedValue={systemSettings.alarmTime.minutes}
                                onValueChange={(itemValue) => handlePickerChange('minutes', itemValue)}
                            >
                                {Array.from({ length: 60 }, (_, i) => i).map((minute) => (
                                    <Picker.Item key={minute} label={minute.toString()} value={minute} />
                                ))}
                            </Picker>
                        </View>
                    </View>
                )}
            </View>
            <TouchableOpacity style={styles.saveButton} onPress={handleSaveSystemSettings}>
                <Text style={styles.ButtonText}>Save System Settings</Text>
            </TouchableOpacity>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 16,
    },
    title: {
        fontSize: 28,
        fontWeight: 'bold',
        marginVertical: 10,
    },
    profileOutlet:{
        borderRadius: 8,
        backgroundColor: '#fff',
    },
    switchContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 10,
        padding: 16,
        borderBottomWidth: 0.5,
        borderBottomColor: '#d9d6d6',
    },
    text: {
        color: '#676767',
        fontSize: 16,
    },
    timePickerContainer: {
        marginTop: 10,
    },
    profile:{
        flexDirection: 'row',
        overflow: 'hidden',
        alignItems: 'center',
        justifyContent: "space-between",
        paddingHorizontal: 18,
        borderBottomWidth: 0.5,
        borderBottomColor: '#d9d6d6',
    },
    input: {
        color: '#8f8f8f',
        fontSize: 14,
        minWidth: '30%',
        textAlign: 'right'
    },
    pickerContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    colon: {
        marginHorizontal: 5,
    },
    saveButton: {
        backgroundColor: '#0092fe',
        color: 'white',
        padding: 10,
        borderRadius: 5,
        alignItems: 'center',
        marginTop: 10,
    },
    ButtonText: {
        color: 'white',
    },
});

export default SystemScreen;
